<template>
    <div id="banner">
        <template
            v-for="(item,index) in articleList"
        >
            <div
                :key="item._id"
                class="pointer banner-item"
                @click="showArticleDetail(index,item)"
            >
                <img
                    v-lazy="item.coverImagesUrl"
                    alt=""
                >
                <div
                    class="ellipsis title"
                    v-text="item.title"
                ></div>
            </div>
        </template>
    </div>
</template>

<script>
    import { searchArticleMixins } from 'assets/js/mixins';
    export default {
        mixins: [
            searchArticleMixins
        ],
        data () {
            return {
                articleList: [],
                paramsJson: {
                    type: 'isTop'
                }
            };
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#banner{
    display: flex;
    margin-top: 20px;
    .banner-item{
        position: relative;
        width: 33.33%;
        height: 200px;
        border-radius: 10px;
        color: @color-text-main;
        overflow: hidden;
        &:not(:last-of-type){
            margin-right: 17px;
        }
        img{
            width: 100%;
            transition: all .5s ease;
        }
        .title{
            position: absolute;
            bottom: 10px;
            width: 100%;
            line-height: 30px;
            padding: 0 25px;
            background-color: rgba(0,0,0.7);
        }
        &:hover{
            img{
                transform: scale(1.1);
            }
        }
    }
}
</style>
